<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="form-back"></view>
		<view class="form-box" :style="{'top':navHeight+'rpx'}">
			<view class="progress-box acea-row row-between-wrapper">
				<block v-for="(item,index) in progress_list" :key="index">
					<view class="progress-item">
						<view class="active" v-if="index == active "><text class="iconfont icon-duihao2"></text>
						</view>
						<view class="index" v-else>{{index+1}}</view>
						<view class="title">{{item}}</view>
					</view>
					<view class="line" v-if="(index+1) !== progress_list.length "></view>
				</block>
			</view>
			<view class="box name-box acea-row row-between-wrapper" style="padding: 30rpx;">
				<view class="">
					<text class="iconfont icon-fenlei"></text>服务类型
				</view>
				<view class="">家庭陪护</view>
			</view>
			<view class="box acea-row row-middle" style="padding: 30rpx;" v-if="!accompanying && list.confirm_code">
				服务确认码：<text style="font-size: 32rpx;color: #666;font-weight: 700;">{{list.confirm_code}}</text>
			</view>
			<view class="box form">
				<navigator class="line acea-row ">
					<view class="tit"> 就诊人 </view>
					<view class="text"> {{list.info.member_name}} </view>
				</navigator>
				<view class="line acea-row ">
					<view class="tit"> 家庭住址 </view>
					<view class="text"> {{list.info.city}} </view>
				</view>
				<view class="line acea-row">
					<view class="tit"> 具体地址 </view>
					<view class="text"> {{list.info.address}} </view>
				</view>
				<view class="line acea-row ">
					<view class="tit"> 自理能力 </view>
					<view class="text"> {{list.info.selfcare_ability}} </view>
				</view>
				<view class="line acea-row ">
					<view class="tit"> 服务时间 </view>
					<view class="text"> {{list.info.selected_date}} </view>
				</view>
				<view class="line acea-row">
					<view class="tit"> 服务天数 </view>
					<view class="text"> {{list.info.service_days}}天 </view>
				</view>
				<view class="line acea-row">
					<view class="tit"> 联系电话 </view>
					<view class="text"> {{list.info.receive_mobile}} </view>
				</view>
				<view class="line acea-row">
					<view class="tit"> 服务需求 </view>
					<textarea v-model="list.info.remark" disabled></textarea>
				</view>
				<view class="line acea-row">
					<view class="tit"> 订单金额 </view>
					<view class="text"> ￥{{list.total_price}} </view>
				</view>
			</view>
		</view>
		<u-loading-page :loading="isdown"></u-loading-page>
	</view>
</template>

<script>
	let app = getApp();
	const d = new Date()
	const year = d.getFullYear();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '家庭陪护',
					'color': false,
				},
				navHeight: app.globalData.navHeight,
				progress_list: ['填写订单', '代支付', '已支付', '服务完成', ],
				list: {},
				active: 3,
				isdown: true,
				accompanying: ''
			};
		},
		onLoad(option) {
			var id = option.id
			this.accompanying = option.accompanying;
			if (option.accompanying) {
				this.orderInfo2(id)
			} else {
				this.orderInfo1(id)
			}
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async orderInfo1(id) {
				this.list.openid = uni.getStorageSync('openid')
				const res = await this.$myRequest({
					url: '/api/order/orderInfo',
					data: {
						openid: uni.getStorageSync('openid'),
						order_id: id
					}
				})
				console.log("订单详情", res.data.data);
				this.list = res.data.data;
				this.isdown = false;
				if (res.data.data.status < 2) {
					this.active = res.data.data.status + 1
				} else {
					this.active = 3
				}
			},
			async orderInfo2(id) {
				this.list.openid = uni.getStorageSync('openid')
				const res = await this.$myRequest({
					url: '/api/manage/orderInfo',
					data: {
						openid: uni.getStorageSync('openid'),
						order_id: id
					}
				})
				console.log("订单详情", res.data.data);
				this.list = res.data.data;
				this.isdown = false;
				if (res.data.data.status < 2) {
					this.active = res.data.data.status + 1
				} else {
					this.active = 3
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		position: relative;
		padding: 0;
	}

	.form-back {
		width: 100%;
		height: 210rpx;
		background: linear-gradient(135deg, #689FFF, #347DFE);
	}

	.form-box {
		position: absolute;
		width: 100%;
		left: 0;
		padding: 0 30rpx;
	}

	.box {
		width: 100%;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.name-box {
		color: #000;
		font-size: 28rpx;
	}

	.name-box .iconfont {
		color: #347DFE;
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.progress-box {
		padding: 30rpx 10rpx;
		color: #fff;
	}

	.progress-box .progress-item {
		text-align: center;
	}

	.progress-box .progress-item .active {
		width: 53rpx;
		height: 53rpx;
		background-color: #fff;
		border-radius: 50%;
		margin: 0 auto;
	}

	.progress-box .progress-item .active .iconfont {
		color: #FE8802;
		font-size: 53rpx;
	}

	.progress-box .progress-item .index {
		width: 53rpx;
		height: 53rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.progress-box .progress-item .title {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.progress-box .line {
		width: 70rpx;
		height: 1px;
		background: #F5F6F8;
		margin-top: -40rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line:last-child {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 200rpx;
	}

	.form .line .text {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.form .line textarea {
		width: 100%;
		height: 130rpx;
		border: 1px solid #D9D9DA;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}


	.attention .title {
		height: 100rpx;
		line-height: 100rpx;
	}

	.attention .cont {
		color: #E33434;
		font-size: 28rpx;
		padding-bottom: 30rpx;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx 30rpx 0 30rpx;
		height: 224rpx;
		z-index: 10;
		box-shadow: 3px -6px 9px 0px rgba(172, 196, 255, 0.13);

	}

	.radio-line {
		font-size: 20rpx;
		color: #B0B0B0;
	}

	.radio-line navigator {
		color: #347DFE;
	}

	.btn-box {
		padding-top: 40rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
